<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/Mdate.css">
		<link rel="stylesheet" href="css/index.css">
		<link rel="stylesheet" type="text/css" href="css/compatible.css"/>
		<style>
			body{
				padding-top: 0;
				background: #EBEBED;
				min-height: 100vh;
			}
			#header{
				padding-top: 15px;
				padding-bottom: 15px;
			}
			
			#header input{
				background: #fff;
			}
		</style>
	</head>

	<body>
		<header class="" id="header">
			<form id="form">
				<div class="mui-input-row mui-search filter-search">
					<input type="search" name="keywork" class="mui-input-clear" placeholder="单据号/顾客姓名/卡号">
				</div>
				<div class="form-filter clear mui-row">
					<label class="mui-col-xs-4 calendar"><input type="text" name='start_time' readonly="readonly" value="" id="dateStart" /></label>
					<label class="mui-col-xs-4 calendar"><input type="text" name='end_time' readonly="readonly" value="" id="dateEnd" /></label>
					<label class="mui-col-xs-3"><div id="filter-submit"><input type="submit" value="" /></div></label>
				</div>
			</form>
		</header>
		<div class="mui-content">
		    
		
		<main id="content" class="container">
			<section class="filter-lists"></section>
		</main>
		</div>
	</body>
	<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/mui.min.js"></script>
	<script src="js/iScroll.js"></script>
	<script src="js/Mdate.js"></script>
	<script src="../js/muishow.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/req.js" type="text/javascript" charset="utf-8"></script>
	
	<script type="text/javascript">
		
		var _data = {
			access_token : acctoken()
		}
		
		mui.plusReady(function(){  
		    var arg = plus.webview.currentWebview();
			
			_data['product_id'] = arg.id,
			console.log(arg.store)
			if(arg.store){
				_data['store_id'] = arg.store
			}
			
			r(_data)
			
			$('#form').on('submit', function (){
				var values = $(this).serializeArray()
				var v = {}
				values.forEach(function(cur, index){
					if(cur['name'] == 'keywork' && !!cur['value']){
						_data['key'] = cur['value']
					}else{
						if(cur['value'] == ''){
							v = {}
						}else{
							v[cur['name']] = cur['value']
						}
						
					}
				})
				
				_data = Object.assign(_data, v);
				console.log(_data)
				r(_data)
				
				return false;
			})
		   
		}) 
		
		 
		
		function r(data){
			ajax({
				url : '/api/order/get_order_product',
				data : data
			}, function (res){
				
				var html = []
				var d = res.data.data
				if(d.length > 0){
					d.forEach(function (cur, index){
						var tpl = `<div class="filter-item">
								<div class="filter-item-title clear">
									<h3 class="pull-left">${cur['order_product'].order_number}</h3>
									<span class="pull-right">${cur['order_product'].order_status} <i class="mui-icon mui-icon-arrowright"></i></span>
								</div>
								<div class="filter-item-body clear">
									<div class="pull-left ell">${cur.product_name}</div>
									<p class="pull-left"><i class="mui-icon mui-icon-closeempty"></i>${cur.product_number}</p>
									<b class="pull-right">￥${cur.product_money}</b>
								</div>
								<div class="filter-item-footer clear">
									<span class="pull-left">${cur.createtime.split(' ')[0]}</span>
									<span class="pull-right">${!!cur['order_product'].order_member_msg ? cur['order_product'].order_member_msg.username+'('+ cur['order_product'].order_member_msg.card_number +')' : '散客'}</span>
								</div>
							</div>`;
							
							
						html.push(tpl)
					})
				}
				
				$('.filter-lists').html(html.join(''))
				
			})
		}
		
		
		
		//mui.init()
		new Mdate("dateStart", {
			beginYear: "2018",
			beginMonth: "10",
			beginDay: "24",
			endYear: "2029",
			endMonth: "12",
			endDay: "31",
			format: "-"
		});
		new Mdate("dateEnd", {
			beginYear: "2018",
			beginMonth: "10",
			beginDay: "24",
			endYear: "2029",
			endMonth: "12",
			endDay: "31",
			format: "-"
		});
	</script>
</html>
